<template>
	<view>
		<view class="part" v-if="thumb == ''">
			<swiper class="banner-box" indicator-dots autoplay indicator-active-color="#ff5555"  circular :interval="5000" :duration="300" indicator-color="rgba(0,0,0,.3)">
				<swiper-item v-for="(item, index) in bannerList" :key="index">
					<image class="banner-image" :src="item" mode="aspectFill" lazy-load></image>
				</swiper-item>
			</swiper>
		</view>
		<view v-if="thumb != ''" class="thumb">
			<image :src="thumb" mode="aspectFill"></image>
		</view>
		<view class="content">
			<view class="info"  style="position: relative;">
				<div class="top webkit">
					<text class="flex mid" v-if="data.title">{{data.title}}</text>
					<button class="right"
						style="margin: 0;padding: 0;outline: none;border: 1px solid #fff;background-color: #fff;"
						open-type="share">
						<image src="../../static/share.png"></image>
						<text>分享</text>
					</button>
				</div>
				<div class="center">
					<div class="center" v-if="data.credit1<=0" >
						<view class="subtitle" v-if="data.subtitle">{{data.subtitle}}</view>
						<view class="price" v-if="data.marketprice">¥{{data.marketprice}}
						<view class="original" v-if="data.productprice">¥{{data.productprice}}</view>
						</view>
					</div>
					<div class="center" v-if="data.credit1>0">
						<view class="subtitle" v-if="data.subtitle">{{data.subtitle}}</view>
						<view class="price" v-if="data.marketprice">¥{{data.marketprice}}</view>
						<view class="original" style="margin-top: 10upx;" v-if="data.credit1">
							<text style="background-color: #FF5555;padding: 0 20upx;border-radius: 10upx;color: #fff;" >{{data.credit1}}优惠券 + ¥{{data.youhuiprice}}</text>
						</view>
					</div>
					<!-- <view class="bl" v-if="coin!=''">支持余额比例{{data.jfbl}}%</view> -->
				</div>
				<div class="bottom webkit">
					<view class="flex">
						快递：
						<view class="kd" v-if="isNaN(data.dispatchprice)">
							<view v-if="data.type == 1&&data.isverify !=2">{{min}}~{{max}}</view>
						</view>
						<view class="kd" v-else-if="data.type == 1&&data.isverify !=2">
							<view class="" v-if="data.dispatchprice == 0">
								包邮
							</view>
							<view v-else>{{dispatchprice}}</view>
						</view>
					</view>
					<view v-if="data.sales">
						销量：{{data.sales}}
					</view>
					<view style="margin-left: 50upx;">
						库存：{{data.total}}
					</view>
				</div>
				<!-- <view class="tag" v-if="data.nocommission == 1">分享赚佣金</view> -->
			</view>
			<!-- <view class="city" v-if="data.has_city != 0" @tap="showPicker">
				<view class="text ellipsis-1" v-if="data.onlysent == 0">{{cityText}}：
					<view v-for="(item,index) in data.citys" :key="index" v-if="item">{{item}}</view>
				</view>
			</view> -->
			<!-- <view class="jifen" v-if="coin!=''">
				<view class="title">
					支持余额购买
				</view>
				<div class="subtitle">
					可选以下任意支付方式
				</div>
				<view class="list clear">
					<view v-for="(item,index) in coin" :key="index" class="term">
						<view class="symbol">¥</view>
						<view class="num">{{data.xjbl}}+{{item.number}}</view>
						<view class="coinname">{{item.coinname}}</view>
					</view>
				</view>
			</view> -->
			<view class="tab" v-if="params? true:false">
				<uni-segmented-control :current="current" :values="tabs" @clickItem="onClickItem"  style-type="text" active-color="#175e3c"></uni-segmented-control>
				<view class="content">
					<view v-show="current === 0">
						<rich-text :nodes="content"></rich-text>
					</view>
					<view v-show="current === 1">
						<view class="params webkit" v-for="(item,index) in data.params" :key="index">
							<view class="t" v-if="item.title">{{item.title}}</view>
							<view class="v flex" v-if="item.value">{{item.value}}</view>
						</view>
					</view>
				</view>
			</view>
			<view class="goods-detail" v-else>
				<rich-text :nodes="content"></rich-text>
			</view>
		</view>
		<view class="modal" :class="{in:picker}">
			<view class="city-picker">
				<view class="t" v-if="cityText">{{cityText}}</view>
				<view class="g">
					<view class="cell">
						<view v-for="(item,index) in data.citys" :key="index" v-if="item">{{item}}</view>
					</view>
				</view>
				<button type="primary" @tap="cityPicker">确定</button>
			</view>
		</view>
		<view class="mask" :class="{visible:picker}" v-bind:style="{ display: display}" @tap="cityPicker"></view>
		<view class="foot webkit">
			<view class="item" @click="home" style="margin-top: -5upx;">
				<image src="../../static/home.png" style="width: 45upx;height: 45upx;"></image>
				<text class="text">首页</text>
			</view>
			<view class="item" @tap="fav">
				<image :src="love"></image>
				<text class="text" v-bind:style="{color: color}">关注</text>
			</view>
			<!-- <view class="item" @click="cart">
				<image src="../../static/cart.png"></image>
				<text class="text">购物车</text>
				<uni-badge v-if="data.cartCount > 0 " :text="data.cartCount" type="danger"></uni-badge>
			</view> -->
			<view class="btn flex" @click="buygoods" data-type="0" v-if="data.gift == 1 || data.gift == 2">加入购物车</view>
			<view class="btn flex buy" @click="buygoods" style="background-color: #EB2E15;" data-type="1">立即购买</view>
		</view>
		<view class="mask" v-if="mask" :class="{active:buy}" @click="closeModal"></view>
		<view class="modal" :class="{in:buy}">
			<view class="option">
				<view class="inner">
					<view class="goodsinfo">
						<image src="../../static/close.png" mode="" style="width: 40upx;height: 40upx;position: absolute;right: 24upx;top: 20pux;" @click="closeModal"></image>
						<image class="image" :src="data.thumb" mode=""></image>
						<view class="topinfo" style="color: #f55;">￥{{marketprice}}</view>
						<view class="topinfo" style=""></view>
						<view class="topinfo" style="">
							<view v-if="options.options">{{optionsText}}</view>
						</view>
					</view>
					<view>
						<view v-for="(item,index) in optionlist" :key='index' class="optionlist">
							<view style="line-height: 80upx;" v-if="item.title">{{item.title}}</view>
							<view class="filter-body-section-body style-flex style-flex-wrap">
								<axb-check-box ref="radio3" :list="item.list" @change="radioChangeType($event,item.id)"></axb-check-box>
							</view>
						</view>
						<view class="webkit optionlist" style="padding-top: 20upx;">
							<view>数量：</view>
							<view class="flex"></view>
							<view>
								<!-- <uni-number-box :min="item.minbuy" :max="item.maxbuy" :value="item.total" v-on:change="update($event,item.id)"></uni-number-box> -->
								<uni-number-box :min="minbuy" :max="maxbuy" :value="numvalue" v-on:change="update"></uni-number-box>
							</view>
						</view>
						<view style="height: 100upx;"></view>
					</view>
					<view>
						<button type="primary" style="border-radius: 0;background: #EB2E15;" @click="submit">确定</button>
					</view>
				</view>
			</view>
		</view>
		
		
		<!-- 分享面板 -->
		<view class="mask" :class="maskState===0 ? 'none' : maskState===1 ? 'show' : ''" @click="toggleMask">
			<view class="mask-content">
				<scroll-view class="view-content" scroll-y>
					<view class="share-header">
						分享到
					</view>
					<view class="share-list">
						<button 
							v-for="(item, index) in shareList" :key="index"
							class="share-item"
							open-type="share"
						>
							<image :src="item.icon" mode=""></image>
							<text>{{item.text}}</text>
						</button>
					</view>
				</scroll-view>
			</view>
		</view>
	</view>
</template>
<script>
	import uniSegmentedControl from '../../components/uni-segmented-control.vue';
	import uniBadge from '../../components/uni-badge.vue';
	import uniNumberBox from '../../components/uni-number-box.vue';
	import axbCheckBox from '../../components/axb-checkbox/axb-checkbox.vue';
	export default {
		onShareAppMessage(res) {
			if (res.from === 'button') {// 来自页面内分享按钮
			}
			return {
				title: this.shorttitle,
				path: '/pages/goods/detail?pid=' + this.pid_father + '&goodsid=' + this.goodsid
			}
		},
		data() {
			return {
				tabs: [
					'详情',
					'参数'
				],
				options:[],
				optionsText:'请选择规格',
				data:[],
				bannerList:[],
				coin:[],
				params:false,
				picker:false,
				dispatchprice:"",
				thumb:"",
				max:"",
				min:"",
				love:"../../static/love.png",
				content:"",
				current:0,
				display:'none',
				cityText:"只配送区域",
				favorite:0,
				color:"#999",
				goodsid:'asd',
				buy:false,
				mask:false,
				subBtn:0,
				total:1,
				minbuy:1,
				maxbuy:999,
				numvalue: 1,
				classes:[],
				optionlist:[],
				openid:'',
				oid:'',
				pid:'', // 下一级id'
				pid_father: '', //上一级id
				shareList: [
					{
						type: 1,
						icon: '/static/share_wechat.png',
						text: '微信好友'
					},
					// {
					// 	type: 2,
					// 	icon: '/static/temp/share_moment.png',
					// 	text: '朋友圈'
					// },
				],
				maskState: 0, //分享面板显示状态
				marketprice:'',
				shorttitle:'',
			};
		},
		onPullDownRefresh() {
			this.setAjax()
			setTimeout(function () {
					uni.stopPullDownRefresh();
			}, 1000);
		},
		onLoad:function(e){
			// 邀请码
			if ( e.pid ) {
				uni.setStorage({
					key: 'pid',
					data: e.pid
				})
			}
			this.goodsid = e.goodsid
			uni.showLoading({
				title: '加载中...',
			})
			uni.getStorage({
				key: 'openid',
				success: (res) => {
					this.oid ="&openid=" + res.data
					this.openid =res.data
					this.setAjax()
				},
				fail: () => {
					this.setAjax()
				}
			});
			uni.getStorage({
				key: 'pid_father',
				success: (res) => {
					this.pid_father = res.data
				}
			});
		},
		components: {
			uniSegmentedControl,
			uniBadge,
			uniNumberBox,
			axbCheckBox
		},
		
		methods:{
			setAjax(){
				uni.request({
					url: 'http://hszj.hongshantang696.com//app/index.php?i=4&c=entry&m=ewei_shopv2&do=mobile&r=goods.detail&id='+this.goodsid+'&app=1'+this.oid,
					success: res => {
							uni.hideLoading()
						this.data = res.data;
						if ( res.data.shorttitle && res.data.shorttitle.length > 0) {
							this.shorttitle = res.data.shorttitle
						} else {
							this.shorttitle = res.data.title
						}
						this.marketprice = this.data.marketprice
						this.coin = res.data.coin;
						if(res.data.thumbs.length < 1){
							this.thumb = res.data.thumb;
						}else{
							this.bannerList = res.data.thumbs;
						}
						if(res.data.params){
							this.params = true;
						}
						if(isNaN(res.data.dispatchprice)){
							this.max = res.data.dispatchprice.max.toFixed(2);
							this.min = res.data.dispatchprice.min.toFixed(2);
						}else{
							var dis = res.data.dispatchprice
							this.dispatchprice = dis.toFixed(2)
						}
						if(res.data.onlysent == 0){
							this.cityText = "不配送区域"
						}
						this.favorite = res.data.isFavorite
						if(this.favorite == 1){
							this.love = '../../static/love_fill.png'
							this.color = '#f55'
						}
						var content = res.data.content;
						content = content.replace(/data-lazy/g,"src");
						content = content.replace(/style="/g,'style="width:100%;')
						this.content = content;
					},
					fail: () => {},
					complete: () => {}
				});
				if(this.oid != ""){
					uni.request({
						url: 'http://hszj.hongshantang696.com//app/index.php?i=4&c=entry&m=ewei_shopv2&do=mobile&r=goods.picker&app=1&id='+this.goodsid,
						method: 'POST',
						data: {
							'openid': this.openid
						},
						header:{'Content-Type':'application/x-www-form-urlencoded'},
						success: res => {
							uni.hideLoading()
							console.log(res)
							if(res.data.result.goods.maxbuy == 0){
								this.maxbuy = Number(res.data.result.goods.total)
							}else{
								this.maxbuy = Number(res.data.result.goods.maxbuy)
							}
							if(res.data.result.goods.minbuy != 0){
								var minbuy =  Number(res.data.result.goods.minbuy)
								this.minbuy = minbuy
								this.numvalue = minbuy
								this.total =  minbuy
							}
							// console.log(this.numvalue)
							this.options = res.data.result
							var arry = []
							for(var i in this.options.specs){
								var a = []
								var v = {id:'',list:[],title:''}
								for(var j in this.options.specs[i].items){
									var ary = {name: '',value: '',checked: 0,}
									ary['name'] = this.options.specs[i].items[j].title
									ary['value'] = this.options.specs[i].items[j].id
									ary['marketprice'] = this.options.specs[i].items[j].price
									// ary['marketprice'] = this.options.specs[i].items[j].price
									a.push(ary)
								}
								v['list'] = a
								v['id'] = this.options.specs[i].id
								v['title'] = this.options.specs[i].title
								arry.push(v)
							}
							this.optionlist = arry
							// console.log(this.optionlist)
						},
						fail: () => {},
						complete: () => {}
					});
				}
				
			},
			cart(){
				if(this.oid == ''){
					uni.showModal({
						content: "请先登录",
						confirmText: "确定",
						cancelText: "取消",
						success: res => {
							if(res.confirm){
								uni.navigateTo({
									url: '../login/login'
								});
							}
						},
					})
				}else{
					uni.reLaunch({
						url: '../cart/cart'
					});
				}
			},
			update(e){
				this.total = e
			},
			radioChangeType(val,id) {//选择规格
				if(val == null){
					val = ''
				}
				this.classes[id] = val
				let list = this.optionlist[0].list
				for ( var i=0; i<list.length; i++) {
					if(list[i].value == val) {
						this.marketprice = list[i].marketprice
					}
				}
			},
			buygoods(e){//点击购买或者购物车按钮
				if(this.oid == ''){
					uni.showModal({
						content: "请先登录",
						confirmText: "确定",
						cancelText: "取消",
						success: res => {
							if(res.confirm){
								uni.navigateTo({
									url: '../login/login?goodsid=' + this.goodsid
								});
							}
						},
					})
				}else{
					this.mask = true
					setTimeout(() =>{
						this.buy = true
					},100)
					if(e.currentTarget.dataset.type == 1){
						this.subBtn = 1
					}else{
						this.subBtn = 2
					}
				}
			},
			onClickItem(index){
				if (this.current !== index) {
					this.current = index;
				}
			},
			cityPicker(){
				this.picker = false;
				this.display = 'none';
			},
			showPicker(){
				this.display = 'block';
				this.picker = true
			},
			fav(){//点击关注
				if(this.oid == ''){
					uni.showModal({
						content: "请先登录",
						confirmText: "确定",
						cancelText: "取消",
						success: res => {
							if(res.confirm){
								uni.navigateTo({
									url: '../login/login'
								});
							}
						},
					})
				}else{
					if(this.favorite == 1){
						this.favorite = 0
						this.love = '../../static/love.png'
						this.color = '#999'
					}else{
						this.favorite = 1
						this.love = '../../static/love_fill.png'
						this.color = '#f55'
					}
					uni.request({
						url: 'http://hszj.hongshantang696.com//app/index.php?i=4&c=entry&m=ewei_shopv2&do=mobile&r=member.favorite.toggle&app=1&id='+this.goodsid+'&isfavorite='+this.favorite,
						method: 'POST',
						data: {
							'openid':this.openid
						},
						header:{'Content-Type':'application/x-www-form-urlencoded'},
						success: res => {
							if(res.data.result.isfavorite == true){
								uni.showToast({
									title: "关注成功"
								})
							}
						},
						fail: () => {},
						complete: () => {}
					});
				}
			},
			closeModal(){//关闭modal
					this.buy = false
				setTimeout(() =>{
					this.mask = false
				},300)
				
			},
			submit(){//提交
				var specs = '',optionid=0
				for(var i in this.classes){
					specs = specs + '_'  + this.classes[i]
				}
				for(var j in this.options.options){
					if('_'+this.options.options[j].specs == specs){
						optionid = this.options.options[j].id
					}
				}
				if(optionid == 0 && this.options.options){
					uni.showToast({
						title: '请选择规格',
						icon:"none"
					});
				}else if(this.subBtn == 1){
					//购买
					uni.navigateTo({
						url: '../order/create/create?id='+this.goodsid+'&optionid='+optionid+'&total='+this.total
					});
				}else if(this.subBtn == 2){
					// 加入购物车
					uni.request({
						url:'http://hszj.hongshantang696.com//app/index.php?i=4&c=entry&m=ewei_shopv2&do=mobile&r=member.cart.add&app=1',
						method: 'POST',
						data: {
							openid:this.openid,
							id:this.goodsid,
							optionid:optionid,
							total:this.total,
							diyformdata:false
							},
						header:{'Content-Type':'application/x-www-form-urlencoded'},
						success: res => {
							this.closeModal()
							setTimeout(() =>{
								uni.showToast({
									title: res.data.result.message,
									duration: 3000,
									icon:"none"
								});
							},300)
							this.setAjax()
						},
						fail: () => {},
						complete: () => {}
					});
				}
			},
			toggleMask(type){
				let timer = type === 'show' ? 10 : 300;
				let	state = type === 'show' ? 1 : 0;
				this.maskState = 2;
				setTimeout(()=>{
					this.maskState = state;
				}, timer)
			},
			home(){
				uni.switchTab({
				    url: '/pages/home/home'
				});
			},
		}
	}
</script>

<style lang="scss">
	.tag {
		position: absolute;
		left: 0;
		top: 0upx;
		z-index: 2;
		line-height: 35upx;
		background: rgba(243, 223, 177, 1);
		background: linear-gradient(132deg, rgba(243, 223, 177, 1), rgba(243, 223, 177, 1), rgba(236, 190, 96, 1));
		border-radius: 0px 18upx 18upx 0px;
		padding: 0 10upx;
		font-size: 24upx;
		font-family: PingFang SC;
		font-weight: bold;
		color: rgba(120, 79, 6, 1);
	}
	
	button::after {
	  border: none;
	}
	/* 分享面板 */
	.mask{
		display: flex;
		align-items: flex-end;
		position: fixed;
		left: 0;
		top: var(--window-top);
		bottom: 0;
		width: 100%;
		background: rgba(0,0,0,0);
		z-index: 9995;
		transition: .3s;
		
		.mask-content{
			width: 100%;
			min-height: 30vh;
			max-height: 70vh;
			background: #f3f3f3;
			transform: translateY(100%);
			transition: .3s;
			overflow-y:scroll;
		}
		&.none{
			display: none;
		}
		&.show{
			background: rgba(0,0,0,.4);
			
			.mask-content{
				transform: translateY(0);
			}
		}
	}
	.share-header{
		height: 110upx;
		font-size: $font-base+2upx;
		color: font-color-dark;
		display:flex;
		align-items:center;
		justify-content: center;
		padding-top: 10upx;
		&:before, &:after{
			content: '';
			width: 240upx;
			heighg: 0;
			border-top: 1px solid $border-color-base;
			transform: scaleY(.5);
			margin-right: 30upx;
		}
		 &:after{
			 margin-left: 30upx;
			 margin-right: 0;
		 }
	}
	.share-list{
		display:flex;
		flex-wrap: wrap;
	}
	.share-item{
		margin: 0;padding: 0;border: 1px solid transparent;outline: none;background: transparent;border: none;border: 0;
		min-width: 33.33%;
		display:flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		height: 180upx;
		image{
			width: 80upx;
			height: 80upx;
			margin-bottom: 16upx;
		}
		text{
			font-size: $font-base;
			color: $font-color-base;
		}
	}
	.share-item::after{
		border: none;
	}
	.spec{color:#000;line-height:50upx;background:#f7f7f7;display:inline-block;font-size:24upx;margin:16upx 20upx 0 0;padding:0 24upx;border-radius:5px;}.optionlist{padding:20upx;padding-top:8upx;border-top:1px solid #eee;}.option{height:auto;width:100%;padding-bottom:80upx;z-index:1001;}.topinfo{font-size:28upx;height:36upx;line-height:36upx;}.inner{background:#fff;border-top:1px solid #eee;box-shadow:0 0 4px rgba(0,0,0,0.1);}.goodsinfo{padding:20upx;padding-left:220upx;position:relative;}.goodsinfo .image{height:168upx;width:168upx;background:#fff;padding:4upx;border:2upx solid #eee;border-radius:4upx;position:absolute;top:-56upx;left:20upx;box-shadow:0 0 8upx rgba(0,0,0,0.1);}.uni-badge{position:absolute;top:3px;right:4px;color:#fff;background:#f00;}.part{width:100%;height:750upx;overflow:hidden;position:relative;}.banner-box{width:100%;height:750upx;}.banner-image{width:100%;height:100%;}.thumb.part{width:100%;height:750upx;border-bottom:20px solid #f9f9f9;overflow:hidden;position:relative;}.banner-box{width:100%;height:750upx;}.thumb{height:750upx;}.thumb image{width:750upx;height:750upx;}.tab{background:#fff;border-top:2upx solid #eaeaea;border-bottom:2upx solid #eaeaea;height:80upx;text-align:center}.tab .flex{line-height:80upx;color:#666;border-bottom:4upx solid transparent;margin-bottom:-2upx;}.tab .flex.active{color:#175e3c;border-color:#175e3c;}.info{padding:16upx 20upx;background:#fff;}.info .top .flex{height:80upx;line-height:40upx;}.info .top .right{width:70upx;text-align:center;margin-left:10upx;}.info .top .right image{display:block;width:34upx;height:34upx;margin:0 auto;}.info .top .right text{color:#f55;display:block;width:70upx;text-align:center;font-size:24upx;}.info .center .subtitle{font-size:26upx;color:#999;line-height:50upx;margin-bottom:10upx;}.info .center .price{color:#f00;display:inline-block;font-size:40upx;line-height:50upx;}.info .center .price .original{display:inline-block;font-size:24upx;color:#c0c0c0;margin-left:20upx;text-decoration:line-through;}.info .center .bl{color:#f00;line-height:56upx;}.info .bottom view{color:#666;font-size:26upx;}.kd{display:inline-block;}.jifen{margin-top:20upx;background:#fff;padding:20upx;margin-bottom:20upx;}.jifen .title{font-size:32upx;color:#000;text-align:center;}.jifen .subtitle{color:#9a9a9a;font-size:24upx;line-height:30upx;padding-top:8upx;text-align:center;}.jifen .list .term{float:left;margin-right:20upx;width:342upx;text-align:center;border:2upx solid #ffe8c8;border-radius:5px;padding:30upx 0;margin-right:2%;margin-top:20upx;list-style:none;color:#9f7a48;}.jifen .list .term:nth-child(2n){margin-right:0;}.jifen .list .term .symbol{display:inline-block;font-size:24upx;color:#9f7a48;}.jifen .list .term .num{display:inline-block;font-size:32upx;color:#9f7a48;}.jifen .list .term .coinname{display:inline-block;font-size:24upx;color:#fe9402;margin-left:10upx;}.segmented-control.text{margin:0;width:100%;background:#fff;}.city{font-size:30upx;padding:22upx 30upx;line-height:48upx;width:750upx;-webkit-box-sizing:border-box;box-sizing:border-box;-webkit-box-pack:justify;-webkit-justify-content:space-between;-ms-flex-pack:justify;justify-content:space-between;-webkit-box-align:center;-webkit-align-items:center;-ms-flex-align:center;align-items:center;background:#fff;margin-top:20upx;position:relative;}.city:after{font-family:uniicons;content:'\E583';position:absolute;right:12px;top:50%;color:#bbb;-webkit-transform:translateY(-50%);-ms-transform:translateY(-50%);transform:translateY(-50%);}.city .text{width:670upx;}.city .text view{display:inline;margin-left:12upx;}.params{padding:30upx 24upx 26upx;background:#fff;position:relative;}.params:before{content:" ";position:absolute;left:20upx;right:20upx;bottom:-2upx;height:2upx;border-top:2upx solid #ebebeb;color:#D9D9D9;-webkit-transform-origin:0 0;-ms-transform-origin:0 0;transform-origin:0 0;-webkit-transform:scaleY(0.5);-ms-transform:scaleY(0.5);transform:scaleY(0.5);}.tab .params view{line-height:28upx;font-size:26upx;border:0;margin:0;text-align:left;}.params .t{width:160upx;color:#999;}.params .v{padding-left:10upx;color:#666;}.tab .content{border-top:1px solid #eaeaea;}.foot{position:fixed;bottom:0;height:100upx;width:750upx;background:#fff;border-top:1px solid #eaeaea;}.foot .item{width:120upx;position:relative;}.foot .item image{width:40upx;height:40upx;display:block;margin:14upx auto 0;}.foot .item .text{display:block;text-align:center;font-size:22upx;color:#999;}.foot .btn{text-align:center;line-height:50px;color:#fff;background:#fe9402;}.foot .btn.buy{background:#fd5555;}.mask{position:fixed;background:rgba(0,0,0,0.8) none repeat scroll 0 0;width:100%;height:100%;left:0;opacity:0;top:0;z-index:1000;-moz-transition-duration:400ms;-webkit-transition-duration:400ms;transition-duration:400ms;}.mask.visible{opacity:1;}.modal{position:fixed;width:100%;z-index:1001;left:0;bottom:-80upx;-webkit-transform:translate3d(0,100%,0);transform:translate3d(0,100%,0);-webkit-transition-property:-webkit-transform;transition-property:transform;}.modal.in{-moz-transition-duration:300ms;-webkit-transition-duration:300ms;transition-duration:300ms;-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0);}.city-picker .t{color:#333;font-size:0.75rem;padding:0.5rem 0.7rem;text-align:center;background:white;}.city-picker .g{background-color:#fff;line-height:1.4;font-size:0.8rem;overflow:hidden;position:relative;overflow-y:auto;max-height:485px;padding:12px;}.city-picker .g .cell view{font-style:normal;display:inline-block;border:1px solid #ebebeb;height:1.2rem;line-height:1.2rem;padding:0 0.5rem;margin:0 0.1rem 0.2rem 0;font-size:0.6rem;border-radius:0.15rem;}.city-picker button{background:#f55;border-radius:0;font-size:15px;height:45px;line-height:45px;}.city-picker button:after{border:0;}.mask{position:fixed;background:rgba(0,0,0,0.8) none repeat scroll 0 0;width:100%;height:100%;left:0;opacity:0;top:0;z-index:1000;-moz-transition-duration:400ms;-webkit-transition-duration:400ms;transition-duration:400ms;}.mask.active{opacity:1;}
</style>